<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
			</view>
			<!-- 筛选区域 -->
			<div class="tablist">
				<div class="tabItem" v-for="(item, index) in tabList" :key="index" @click="onTabChange(item.id)">
					<p :class="currentIndex === item.id ? 'active' : ''">
						{{ item.name }}
					</p>
					<span v-if="currentIndex === item.id"></span>
				</div>
			</div>
			<!-- tab -->
			<view class="filter-tabs">
				<view class="tab-list">
					<view class="tab-item" v-for="(item, index) in filterTabs" :key="index"
						@click="handleTabClick(index)">
						<text :class="['tab-text', currentTab === index ? 'active' : '']">{{ item.name }}</text>
						<u-icon :name="currentTab === 0 ? 'arrow-up' : 'arrow-down'" size="12" color="#666"></u-icon>
					</view>
				</view>
			</view>
			<!-- 商铺列表 -->
			<view class="shop-list">
				<view class="empty-review" v-if="snData.data.length == 0">
					<image src='../static/images/empty-review.png' mode="aspectFit"></image>
				</view>
				<view class="shop-item" v-for="(item, index) in snData.data" :key="index"
					@click="toShopDetail('/pages-landlord/house/houseBills?id=' + item.id )">
					<!-- 左侧图片区域 -->
					<view class="shop-img-wrap">
						<!-- <view class="shop-tag">商铺</view> -->
						<image :src="item.images[0]" mode="aspectFill" class="shop-img"></image>
					</view>
					<!-- 右侧信息区域 -->
					<view class="shop-info">
						<text class="shop-title">{{ item.name }}</text>
						<view class="shop-attrs">
							<text>{{ item.floor }}楼</text>
							<text>{{ item.area }}m²</text>
							<text>{{ item.type_text }}</text>
						</view>
						<view class="shop-tags">
							<text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="tag">{{ tag }}</text>
						</view>
						<view class="shop-price">
							<!-- 	<view class="shopprice">
								查看详情
							</view> -->
							<text class="price">¥{{ item.rent }}</text>
							<text class="unit">/月</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 已抄表 -->
			<u-popup :show="filterShow" mode="top" @close="closeFilter" :safeAreaInsetTop="true">
				<view style="height: 20rpx; line-height: 20rpx; padding-left: 30rpx">{{ filterTabs[currentTab].name }}
				</view>
				<view class="filter_option">
					<view class="option-item1" v-if="currentTab == 0">
						<view class="filter_option_item" :class="{ active: filterTabs[0].value === i + 1 }"
							v-for="(item, i) in sortList" @click="selectOption1(item)">
							{{ item.label }}
						</view>
					</view>
					<view class="two_level_option" v-if="currentTab == 1">
						<view class="options">
							<view class="leftoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="lefttext" @click="leftTab('', 0)"
										:class="{ active: leftcurrentTab === 0 }">全部区域</view>
									<view class="lefttext" :key="item.id" v-for="(item, i) in streetList"
										@click="leftTab(item, i + 1)" :class="{ active: leftcurrentTab === i + 1 }">
										{{ item.name }}</view>
								</scroll-view>
							</view>
							<view class="rightoption">
								<scroll-view class="similar-list" scroll-y>
									<view class="righttext" :key="item.id" v-for="(item, i) in communityList"
										@click="rightTab(item, i)" :class="{ active: rightcurrentTab === i }">{{ item.name }}
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="areaCancel">重置</view>
							<view class="btn primary-btn" @click="areaConfirm">确定</view>
						</view>
					</view>
					<view class="house_type" v-if="currentTab == 2">
						<scroll-view class="tags_type_option_list" scroll-y>
							<view class="house_type_option" :key="i" v-for="(item, i) in houseTypeOption">
								<view class="title">
									{{ item.name }}
								</view>
								<view class="options">
									<view class="option-item" :key="j" :class="{ ischeck: option.ischeck }"
										v-for="(option, j) in item.options" @click="handleChecked(item.type, option)">
										{{ option.name }}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="btns-group">
							<view class="btn default-btn" @click="houseTypeCancel">重置</view>
							<view class="btn primary-btn" @click="houseTypeConfirm">确定</view>
						</view>
					</view>
					<view class="rent_type" v-if="currentTab == 3">
						<view class="rent_type_option">
							<view class="options" :class="{ active: rentcurrentTab === i }" :key="i"
								v-for="(item, i) in rentTypeOption" @click="handleRentSelect(item, i)">
								{{ item }}
							</view>
						</view>
						<view class="custom_rent">
							<view class="title"> 自定义价格 </view>
							<view class="slider">
								<u-slider v-model="customRentValue" step="100" min="0" max="10000"
									@change="customRentChange"></u-slider>
							</view>
							<view class="show_value">
								<text>0</text>
								<text>{{ customRentValue }}元</text>
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="rentTypeCancel">重置</view>
							<view class="btn primary-btn" @click="rentTypeConfirm">确定</view>
						</view>
					</view>
					<view class="tags_type" v-if="currentTab == 4">
						<scroll-view class="tags_type_option_list" scroll-y>
							<view class="tags_type_option" :key="i" v-for="(item, i) in tagsList">
								<view class="tag_options">
									<view class="title">
										{{ item.name }}
									</view>
									<view class="options">
										<view class="option-item" :key="j" :class="{ ischeck: option.ischeck }"
											v-for="(option, j) in item.options"
											@click="handleTagChecked(item.type, option)">
											{{ option.name }}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="btns-group">
							<view class="btn default-btn" @click="tagsTypeCancel">重置</view>
							<view class="btn primary-btn" @click="tagsTypeConfirm">确定</view>
						</view>
					</view>
					<!-- <view class="rent_types" v-if="currentTab == 1">
						<view class="rent_type_option">
							<view class="options" :class="{ active: rentcurrentTab === i }" :key="i"
								v-for="(item, i) in radiolist3" @click="handleRentSelectqu(item, i)">
								{{ item.label }}
							</view>
						</view>
						<view class="btns-group">
							<view class="btn default-btn" @click="rentTypeCancs">重置</view>
							<view class="btn primary-btn" @click="rentTypeConf">确定</view>
						</view>
					</view> -->
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import {
	etaillist,
	houseoption_list2
} from "@/api/landlord"
import {
	getArea,
	getTagList
} from '@/api/gent.js'
import {
	getHouseOptionList
} from '@/api/mine.js'
export default {
	data() {
		return {
			snData: {
				data: []
			},
			show: false,
			showDropdown: false,
			currentTab: 0,
			customRentValue: 0,
			rentcurrentTab: 0,
			currentIndex: 1,
			filterTabs: [{
				name: "综合排序",
				value: "",
				option: [{
					label: "默认排序",
					value: 1,
				},],
			},
			{
				name: "区域",
				value: "",
				option: [{
					label: "默认排序",
					value: 1,
				},],
			},
			{
				name: "户型",
				value: "",
				option: [{
					label: "默认排序",
					value: 1,
				},],
			},
			{
				name: "租金",
				value: "",
				option: [{
					label: "默认排序",
					value: 1,
				},],
			},
			{
				name: "更多",
				value: "",
				option: [{
					label: "默认排序",
					value: 1,
				},],
			},
			],
			streetList: [],
			communityList: [],
			tabList: [{
				name: '未出租',
				num: 3,
				id: 1
			},
			{
				name: '已出租',
				num: 0,
				id: 2
			},
			{
				name: '发布中',
				num: 0,
				id: 3
			}
			],
			shopList: [],
			radiolist3: [],
			sortList: [{
				label: "综合排序",
				value: 1,
			}, {
				label: "最新发布",
				value: 2,
			}, {
				label: "好评优先",
				value: 3,
			}, {
				label: "价格(从低到高)",
				value: 4,
			}, {
				label: "价格(从高到低)",
				value: 5,
			}, {
				label: "面积(从小到大)",
				value: 6,
			}, {
				label: "面积(从大到小)",
				value: 7,
			}, {
				label: "楼层(从高到低)",
				value: 8,
			}, {
				label: "楼层(从低到高)",
				value: 9,
			}],
			rentTypeOption: [
				'不限',
				'1000元以下',
				'1000元-2000元',
				'2000元-3000元',
				'3000元-5000元',
				'5000元以上'
			],
			tagsList: [{
				name: '特色标签',
				type: 1,
				options: []
			},
			{
				name: '装修',
				type: 2,
				options: [{
					name: '精装修',
					value: 2,
					ischeck: false
				}, {
					name: '普通装修',
					value: 1,
					ischeck: false
				}]
			},
			{
				name: '付款',
				type: 3,
				options: [{
					name: '押一付三',
					value: 1,
					ischeck: false
				}, {
					name: '押二付一',
					value: 2,
					ischeck: false
				}, {
					name: '押三付一',
					value: 3,
					ischeck: false
				}, {
					name: '押一付二',
					value: 4,
					ischeck: false
				}]
			},
			],
			houseTypeOption: [{
				type: 1,
				name: '居室',
				options: []
			},
			{
				type: 2,
				name: '朝向',
				options: [{
					name: '东',
					value: 4,
					ischeck: false
				}, {
					name: '西',
					value: 5,
					ischeck: false
				}, {
					name: '南',
					value: 6,
					ischeck: false
				}, {
					name: '北',
					value: 7,
					ischeck: false
				}, {
					name: '东南',
					value: 8,
					ischeck: false
				}, {
					name: '西南',
					value: 9,
					ischeck: false
				}, {
					name: '东北',
					value: 10,
					ischeck: false
				}, {
					name: '西北',
					value: 11,
					ischeck: false
				}]
			},
			{
				type: 3,
				name: '楼层',
				options: [{
					name: '1-3层',
					value: '1-3',
					ischeck: false
				}, {
					name: '4-5层',
					value: '4-5',
					ischeck: false
				}, {
					name: '6层以上',
					value: '6-99',
					ischeck: false
				}]
			}
			],
			form: {
				type: 1,
				community: null,
				street: null,
				rent: null,
				keyword: null,
				order_tpe: null,
				house_type: [],
				face: [],
				floor: [],
				decoration: null,
				payment_type: [],
			},
			queryparams: {
				page: 1,
				page_size: 10
			},
			rightcurrentTab: -1,
			leftcurrentTab: 0,
			currentTab: 0,
			filterShow: false,
		};
	},
	onLoad(e) {
		if (e.id) {
			this.currentIndex = Number(e.id)
			this.form.type = this.currentIndex
		}
		this.getAreaList(0);
		this.getCommentsList()
		this.getHouseOptionLists()
	},
	async onReachBottom() {
		this.queryparams.page++
		this.syncValidFields(this.form, this.queryparams);
			console.log(this.queryparams)
			etaillist(this.queryparams).then((res) => {
			
				res.data.data.data.forEach(e=>{
					this.snData.data.push(e)
				})
				// 更新状态
				this.status = this.houseList.length < this.queryparams.page_size ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh(); // 停止下拉刷新
			})
		},
	methods: {
		getCommentsList() {

			this.syncValidFields(this.form, this.queryparams);
			console.log(this.queryparams)
			etaillist(this.queryparams).then((res) => {
				this.snData = res.data.data
				// 更新状态
				this.status = this.houseList.length < this.queryparams.page_size ? 'nomore' : 'loadmore';
				uni.stopPullDownRefresh(); // 停止下拉刷新
			})
		},
		leftTab(item, index) {
			this.leftcurrentTab = index;
			if (item !== '') {
				this.form.street = item.id;
				this.getStreetList(item.id)
			} else {
				this.communityList = [];
			}
		},
		getStreetList(id) {
			getArea({
				pid: id
			}).then((res) => {
				this.communityList = res.data.data;
			})
		},
		getAreaList(id) {
			getArea({
				pid: id
			}).then((res) => {
				this.streetList = res.data.data;
			})
		},
		rightTab(item, index) {
			this.rightcurrentTab = index;
			this.form.community = item.id;
			this.filterTabs[this.currentTab].name = item.name;
		},

		// 排序
		selectOption1(option) {
			// 处理筛选逻辑
			this.filterTabs[this.currentTab].name = option.label;
			this.filterTabs[this.currentTab].value = option.value;
			this.filterShow = false;
			this.form.order_tpe = option.value
			this.queryparams.page = 1
			this.getCommentsList()
		},
		// 区域重置
		areaCancel() {
			this.leftcurrentTab = 0;
			this.rightcurrentTab = 0;
			this.communityList = [];
			this.form.street = '';
			this.form.community = ''
			this.queryparams.page = 1
			this.getCommentsList()
			this.filterShow = false;
		},
		// 区域确定
		areaConfirm() {
			this.queryparams.page = 1
			this.getCommentsList()
			this.filterShow = false;
		},
		// 户型搜索
		houseTypeConfirm() {
			this.filterShow = false;
			this.queryparams.page = 1
			this.getCommentsList()
		},

		// 户型重置
		houseTypeCancel() {
			this.houseTypeOption.forEach((item) => {
				item.options.forEach((option) => {
					option.ischeck = false
				})
			})
			this.queryparams.page = 1
			this.form.house_type = []
			this.form.face = []
			this.form.floor = []
			this.filterShow = false;
			this.getCommentsList()
		},
		// 租金选择
		rentTypeConfirm() {
			this.filterShow = false;
			this.queryparams.page = 1
			this.getCommentsList()
		},
		// 租金重置
		rentTypeCancel() {
			this.rentcurrentTab = 0
			this.form.rent = ''
			this.filterShow = false;
			this.getCommentsList()
		},
		// 更多重置
		tagsTypeCancel() {
			this.rentcurrentTab = 0
			this.form.tags = []
			this.form.decoration = ''
			this.form.payment_type = []
			this.filterShow = false;
			this.getCommentsList()
		},
		// 更多确定
		tagsTypeConfirm() {
			this.filterShow = false;
			this.queryparams.page = 1
			this.getCommentsList()
		},
		getHouseOptionLists() {
			Promise.all([
				getHouseOptionList({
					cid: 5
				}),
				getHouseOptionList({
					cid: 7
				}),
				getHouseOptionList({
					cid: 8
				})
			]).then(([res1, res2, res3]) => {
				console.log(res2)
				if (res1.data.msg == 'success') {
					this.houseTypeOption[0].options = Object.entries(res1.data.data).map(([key, value]) => ({
						name: value,
						value: key,
						ischeck: false
					}));
				}
				if (res2.data.msg == 'success') {
					this.tagsList[2].options = Object.entries(res2.data.data).map(([key, value]) => ({
						name: value,
						value: key,
						ischeck: false
					}));
				}
				if (res3.data.msg == 'success') {
					this.tagsList[0].options = Object.entries(res3.data.data).map(([key, value]) => ({
						name: value,
						value: key,
						ischeck: false
					}));
				}
			})
		},
		handleTagChecked(type, item) {
			item.ischeck = !item.ischeck
			if (item.ischeck) {
				if (type == 1) {
					this.form.tags = this.form.tags.filter(data => data !== item.value);
				}
				if (type == 2) {
					console.log(item)
					this.form.decoration = item.value;
					this.tagsList[1].options.forEach((option) => {
						option.ischeck = false
					})
					item.ischeck = true;
				}
				if (type == 3) {
					this.form.payment_type = this.form.payment_type.filter(data => data !== item.value);
				}
			} else {
				if (type == 1) {
					this.form.tags = this.form.house_type.filter(data => data !== item.value);
				}
				if (type == 2) {
					this.form.face = ''
				}
				if (type == 3) {
					this.form.payment_type = this.form.payment_type.filter(data => data !== item.value);
				}
			}
		},
		handleChecked(type, item) {
			item.ischeck = !item.ischeck
			if (item.ischeck) {
				if (type == 1) {
					this.form.house_type.push(item.value)
				}
				if (type == 2) {
					this.form.face.push(item.value)
				}
				if (type == 3) {
					this.form.floor.push(item.value)
				}

			} else {
				if (type == 1) {
					this.form.house_type = this.form.house_type.filter(data => data !== item.value);
				}
				if (type == 2) {
					this.form.face = this.form.face.filter(data => data !== item.value);
				}
				if (type == 3) {
					this.form.floor = this.form.floor.filter(data => data !== item.value);
				}
			}
		},
		syncValidFields(sourceObj, targetObj) {
			// 遍历源对象的所有属性
			for (const key in sourceObj) {
				if (sourceObj.hasOwnProperty(key)) {
					const value = sourceObj[key];
					let isValid = false;

					// 判断字段有效性
					if (value !== null && value !== undefined) {
						// 处理数组/字符串类型
						if (typeof value === 'string' || Array.isArray(value)) {
							isValid = value.length > 0;
						}
						// 处理对象类型（非null且非数组）
						else if (typeof value === 'object') {
							isValid = Object.keys(value).length > 0;
						}
						// 处理基础类型
						else {
							isValid = true;
						}
					}

					// 同步到目标对象
					if (isValid) {
						targetObj[key] = value;
					} else {
						// 检查并删除无效字段
						if (targetObj.hasOwnProperty(key)) {
							delete targetObj[key];
						}
					}
				}
			}
			return targetObj;
		},

		handleRentSelectqu(option, index) {
			this.rentcurrentTab = index
			this.form.community = option.value
		},
		handleRentSelect(option, index) {
			this.rentcurrentTab = index
			switch (option) {
				case "不限":
					this.form.rent = ""
					break;
				case "1000元以下":
					this.form.rent = "0-1000"
					break;
				case "1000元-2000元":
					this.form.rent = "1000-2000"
					break;
				case "2000元-3000元":
					this.form.rent = "2000-3000"
					break;
				case "3000元-5000元":
					this.form.rent = "3000-5000"
					break;
				case "5000元以上":
					this.form.rent = "5000-99999"
					break;
			}
		},
		customRentChange(event) {
			if (event > 0) {
				this.rentcurrentTab = -1
				this.form.rent = '0-' + event
			}
		},
		// 路由跳转
		jump(item) {
			uni.navigateTo({
				url: item
			});
		},
		handleTabClick(index) {
			this.currentTab = index;
			console.log(index);
			if (index == 1) {
				houseoption_list2({ cid: 2 }).then(res => {
					console.log(res.data.data);
					let list = []
					res.data.data.forEach(e => {
						list.push({
							value: e.option_id,
							label: e.option_name
						})
					});
					this.filterShow = true;
					this.radiolist3 = list
				})
				return
			}

			this.filterShow = true;
		},
		onTabChange(index) {
			this.currentIndex = index;
			this.form.type=index
			this.getCommentsList()
		},
		closeFilter() {
			this.filterShow = false;
		},
	
		selectOption(option) {
			this.filterTabs[this.currentTab].value = option.value;
			this.showDropdown = false;
			// 处理筛选逻辑
		},
		closeDropdown() {
			this.showDropdown = false;
		},
		toShopDetail(url) {
			uni.navigateTo({
				url: url,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.flex {
	display: flex;
	height: 40rpx;
	align-items: center;
	justify-content: space-between;
}



.rent_types {
	width: 100%;
	height: 480rpx;
	padding: 40rpx 0;
	background-color: #ffffff;
	box-sizing: border-box;

	.rent_type_option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		height: 300rpx;
		overflow-y: auto;

		// border: 1rpx solid red;
		.options {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;

			&.active {
				color: #0095F8;
				background: #F5F6FA;
				border-radius: 36rpx;
			}
		}
	}

	.custom_rent {
		width: 100%;
		height: 200rpx;
		padding: 32rpx;
		margin-top: 16rpx;
		background: #F5F6FA;
		border-radius: 38rpx;
		box-sizing: border-box;

		.title {
			line-height: 40rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
		}

		.show_value {
			display: flex;
			justify-content: space-between;
		}
	}
}

.rent_type {
	width: 100%;
	height: 880rpx;
	padding: 40rpx 0;
	background-color: #ffffff;
	box-sizing: border-box;

	.rent_type_option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;

		.options {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;

			&.active {
				color: #0095F8;
				background: #F5F6FA;
				border-radius: 36rpx;
			}
		}
	}

	.custom_rent {
		width: 100%;
		height: 200rpx;
		padding: 32rpx;
		margin-top: 16rpx;
		background: #F5F6FA;
		border-radius: 38rpx;
		box-sizing: border-box;

		.title {
			line-height: 40rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
		}

		.show_value {
			display: flex;
			justify-content: space-between;
		}
	}
}

.btns-group {
	padding: 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.btn {
		width: 320rpx;
		height: 88rpx;
		line-height: 88rpx;
		box-sizing: border-box;
		border-radius: 44rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		text-align: center;

		&.default-btn {
			color: #0095F8;
			border: 2rpx solid #0095F8;
		}

		&.primary-btn {
			color: #FFFFFF;
			background: #0095F8;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 149, 248, 0.5);
		}
	}
}

.filter_option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.option-item1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24rpx;

		.filter_option_item {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;

			&.active {
				color: #0095F8;
				background: #F5F6FA;
				border-radius: 36rpx;
			}
		}
	}

	.two_level_option {
		width: 100%;
		height: 800rpx;
		background-color: #ffffff;

		.options {
			display: flex;
			justify-content: flex-start;
			height: calc(100% - 168rpx);

			.leftoption {
				height: 100%;
				display: flex;
				box-sizing: border-box;
				padding: 36rpx 24rpx;
				flex-direction: column;
				justify-content: space-between;
				border-right: 4rpx solid #F5F6FA;

				.lefttext {
					width: 208rpx;
					height: 72rpx;
					box-sizing: border-box;
					line-height: 72rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					border-radius: 12rpx;

					&.active {
						background: #F5F6FA;
						color: #0095F8;
					}
				}
			}

			.rightoption {
				height: 100%;
				flex: 1;
				display: flex;
				padding: 36rpx 24rpx;
				box-sizing: border-box;
				flex-direction: column;
				justify-content: space-between;

				.righttext {
					box-sizing: border-box;
					width: 100%;
					text-align: center;
					height: 72rpx;
					line-height: 72rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					padding: 0 40rpx;

					&.active {
						background: #F5F6FA;
						color: #0095F8;
					}
				}
			}

			.similar-list {
				height: 100%;
			}
		}
	}

	.house_type {
		width: 100%;
		height: 880rpx;
		padding: 40rpx 0;
		background-color: #ffffff;

		.tags_type_option_list {
			height: calc(100% - 168rpx);
		}

		.house_type_option {
			padding: 0 40rpx;
			box-sizing: border-box;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				line-height: 40rpx;
				margin-bottom: 24rpx;
			}

			.options {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: flex-start;

				.option-item {
					width: 208rpx;
					height: 68rpx;
					margin-bottom: 24rpx;
					margin-right: 24rpx;
					line-height: 68rpx;
					background: #F5F6FA;
					border-radius: 38rpx;
					text-align: center;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;

					&:nth-child(3n) {
						margin-right: 0;
					}

					&.ischeck {
						background-color: #b2c1ff;
					}
				}
			}
		}
	}

	.rent_type {
		width: 100%;
		height: 880rpx;
		padding: 40rpx 0;
		background-color: #ffffff;
		box-sizing: border-box;

		.rent_type_option {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;

			.options {
				width: 100%;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;

				&.active {
					color: #0095F8;
					background: #F5F6FA;
					border-radius: 36rpx;
				}
			}
		}

		.custom_rent {
			width: 100%;
			height: 200rpx;
			padding: 32rpx;
			margin-top: 16rpx;
			background: #F5F6FA;
			border-radius: 38rpx;
			box-sizing: border-box;

			.title {
				line-height: 40rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
			}

			.show_value {
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.tags_type {
		width: 100%;
		height: 880rpx;
		padding: 40rpx 0;
		background-color: #ffffff;
		box-sizing: border-box;

		.tags_type_option_list {
			height: calc(100% - 168rpx);

			.tags_type_option {
				padding: 0 40rpx;
				box-sizing: border-box;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					line-height: 40rpx;
					margin-bottom: 24rpx;
				}

				.options {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: flex-start;

					.option-item {
						width: 208rpx;
						height: 68rpx;
						margin-bottom: 24rpx;
						margin-right: 24rpx;
						line-height: 68rpx;
						background: #F5F6FA;
						border-radius: 38rpx;
						text-align: center;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;

						&:nth-child(3n) {
							margin-right: 0;
						}

						&.ischeck {
							background-color: #b2c1ff;
						}
					}
				}
			}

		}
	}


}

.empty-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48rpx 0;

	image {
		width: 328rpx;
		height: 208rpx;
		margin-bottom: 24rpx;
	}


}

.filter-tabs {
	position: relative;
	margin: 0rpx 0;

	.tab-list {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		border-radius: 8rpx;

		.tab-item {
			display: flex;
			align-items: center;

			.tab-text {
				font-size: 26rpx;
				color: #666;
				margin-right: 4rpx;

				&.active {
					color: #2979ff;
				}
			}
		}
	}

	.dropdown-content {
		width: 100vw;
		position: absolute;
		left: -40rpx;
		right: 0;
		z-index: 100;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 98;
		}

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;

			.option-list {
				padding: 20rpx;
				max-height: 600rpx;
				overflow-y: auto;

				.option-item {
					padding: 20rpx;

					.option-text {
						font-size: 26rpx;
						color: #333;

						&.active {
							color: #2979ff;
						}
					}
				}
			}
		}
	}
}

.flexbuttonbox {
	display: flex;
	justify-content: end;
	align-items: center;
	height: 60rpx;

	.flexbutton {
		font-size: 25rpx;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		background-color: #fe4f04;
		color: #fff;
	}
}

.submitbox {
	width: 100%;
	margin: 0 auto;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	color: #fff;
	background-color: #fe4f04;
}

.meterreading {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cord {
	width: 100%;
	margin: 30rpx auto;
	box-sizing: border-box;
	padding: 15rpx;
	background: #fff;
	// border-radius: 15rpx;
}

.search-box-search {
	display: flex;
	border: 1rpx solid #f3f3f3;
	border-radius: 40rpx;
	box-sizing: border-box;
	padding: 0 10rpx;
}

.container {
	min-height: 100vh;
	background-color: #f5f6fa;
}

.tablist {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 36px;
	background: #fff;

	.tabItem {
		height: 35px;

		p {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #606060;
		}

		.active {
			font-size: 15px;
			color: #333333;
			font-weight: bold;
		}

		span {
			width: 16px;
			height: 3px;
			background: #FE4F04;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.35);
			border-radius: 2px;
			display: block;
			margin: 6px auto;
		}
	}
}

.search-box {
	padding: 24rpx 32rpx;
	background: #fff;

	:deep(.u-search) {
		background-color: #ffffff !important;
		border-radius: 36rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		border: 1px solid #EEEEEE;

		.u-search__content {
			background-color: #ffffff !important;
			height: 72rpx;
			padding: 0 30rpx;

			.u-search__content__icon {
				margin-right: 8rpx;
			}

			.u-search__content__input {
				font-size: 28rpx;
			}
		}
	}
}

.filter-tabs {
	position: relative;
	background: #f5f6fa;

	.tab-list {
		display: flex;
		justify-content: space-around;
		padding: 24rpx 0;

		.tab-item {
			display: flex;
			align-items: center;
			position: relative;

			.tab-text {
				font-family: PingFangSC, PingFang SC;
				font-size: 26rpx;
				color: #666666;
				margin-right: 6rpx;

				&.active {
					color: #2979ff;
					font-weight: 500;
				}
			}

			// 添加第一个选项的特殊样式（综合排序）
			&:first-child {
				.tab-text {
					color: #2979ff;
				}
			}
		}
	}

	.dropdown-content {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 100;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 98;
		}

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			.option-list {
				padding: 20rpx 0;

				.option-item {
					padding: 20rpx 32rpx;

					.option-text {
						font-size: 26rpx;
						color: #666666;

						&.active {
							color: #2979ff;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

.shop-list {
	padding: 24rpx;

	.shop-item {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;

		.shop-img-wrap {
			position: relative;
			width: 240rpx;
			height: 180rpx;
			margin-right: 24rpx;
			flex-shrink: 0;

			.shop-tag {
				position: absolute;
				left: 0;
				top: 0;
				background: #3b7cff;
				color: #fff;
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 8rpx 0 8rpx 0;
				z-index: 1;
			}

			.shop-img {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.shop-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-width: 0; // 防止文字溢出

			.shop-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				line-height: 40rpx;
				margin-bottom: 12rpx;
				// 文字超出显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.shop-attrs {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 12rpx;

				text {
					position: relative;
					margin-right: 24rpx;

					&:not(:last-child)::after {
						content: "";
						position: absolute;
						right: -12rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 20rpx;
						background: #eeeeee;
					}
				}
			}

			.shop-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;
				margin-bottom: 12rpx;

				.tag {
					font-size: 20rpx;
					color: #4F5963;
					background: #F2F5FB;
					padding: 2rpx 8rpx;
					border-radius: 4rpx;
				}
			}

			.shop-price {
				// border: 1rpx solid red;
				color: #fe5b16;
				display: flex;
				align-items: baseline;
				// justify-content: end;
				font-size: 25rpx;

				.shopprice {
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					border: 1rpx solid #fe5b16;
				}

				.price {
					font-size: 32rpx;
					font-weight: 600;
				}

				.unit {
					font-size: 22rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
}
</style>